import 'package:chat/common/style/AppSize.dart';
import 'package:chat/common/style/color.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';

import '../../../../common/routers/index.dart';
import 'index.dart';

class LoginPage extends GetView<LoginController> {
  const LoginPage({super.key});

  Widget _buildTextField({
    required TextEditingController controller,
    required String lable,
    String? hint,
    Widget? icon,
    bool obscure = false,
    TextInputType inputType = TextInputType.text,
    List<TextInputFormatter>? formatter,
    Widget? suffix,
  }) {
    return SizedBox(
      height: 48,
      child: TextField(
        controller: controller,
        obscureText: obscure,
        keyboardType: inputType,
        inputFormatters: formatter,
        decoration: InputDecoration(
          labelText: lable,
          hintText: hint,
          icon: icon,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(10)),
          contentPadding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
          suffixIcon: suffix,
        ),
      ),
    );
  }

  // 登录表单
  Widget _login(LoginController controller) {
    return Column(
      children: [
        _buildTextField(
          controller: controller.userNameController,
          lable: "用户账号登录",
          icon: SvgPicture.asset("assets/icon/person.svg", width: 25, height: 25),
        ),

        SizedBox(height: 30),

        _buildTextField(
          controller: controller.passwordController,
          lable: "登录密码",
          obscure: controller.isObscure.value,
          icon: SvgPicture.asset("assets/icon/password.svg", width: 25, height: 25),
          suffix: Obx(
            () => IconButton(
              onPressed: () => controller.isObscure.value = !controller.isObscure.value,
              icon: Icon(controller.isObscure.value ? Icons.visibility_off : Icons.visibility),
            ),
          ),
        ),

        SizedBox(height: 30),

        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            GestureDetector(onTap: () => Get.toNamed(RouteNames.forget), child: Text("忘记密码")),
            GestureDetector(onTap: () => Get.toNamed(RouteNames.register), child: Text("注册账号")),
          ],
        ),

        SizedBox(height: 30),

        SizedBox(
          width: double.infinity,
          child: ElevatedButton(
            onPressed: controller.login,
            child: Text("登录", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
            style: ElevatedButton.styleFrom(backgroundColor: MyColors.main_color),
          ),
        ),

        Spacer(),

        Padding(
          padding: EdgeInsets.only(bottom: 30),
          child: Row(
            children: [
              Expanded(child: Divider(color: Colors.grey, thickness: 0.5)),
              GestureDetector(
                child: Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  width: 60,
                  height: 60,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(color: MyColors.main_color, shape: BoxShape.circle),
                  child: SvgPicture.asset("assets/icon/phone.svg", width: 35, height: 35, color: Colors.white),
                ),
                onTap: () => Get.toNamed(RouteNames.phoneLogin),
              ),
              Expanded(child: Divider(color: Colors.grey, thickness: 0.5)),
            ],
          ),
        ),
      ],
    );
  }

  // 主视图
  Widget _buildView(LoginController controller) {
    return Stack(
      children: [
        Column(
          children: [
            SizedBox(height: 50),
            Center(
              child: ClipRRect(
                borderRadius: BorderRadius.circular(100),
                child: Image.asset("assets/logo/logo.png", width: 100, height: 100, fit: BoxFit.cover),
              ),
            ),
            SizedBox(height: 30),
            Expanded(
              child: Container(
                width: double.infinity,
                decoration: BoxDecoration(
                  color: Colors.white, // 背景色
                  borderRadius: BorderRadius.only(topLeft: Radius.circular(AppSize.indicator)),
                ),
                child: Padding(padding: EdgeInsets.symmetric(horizontal: 20, vertical: 50), child: _login(controller)),
              ),
            ),
          ],
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      init: LoginController(),
      id: "login",
      builder: (controller) {
        return Scaffold(
          resizeToAvoidBottomInset: false,
          appBar: AppBar(
            backgroundColor: MyColors.main_color,
            elevation: 0,
            title: Text("登录", style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)),
            centerTitle: true,
            leading: IconButton(onPressed: Get.back, icon: const Icon(Icons.arrow_back_outlined, size: 30, color: Colors.white)),
          ),
          body: Container(color: MyColors.main_color, child: SafeArea(bottom: false, child: _buildView(controller))),
        );
      },
    );
  }
}
